<template>
  <div id="app" @click="touch" @dblclick="fullscreen">
    <!-- 占位符 -->
    <router-view></router-view>
  </div>
</template>

<script>
// import screenfull from 'screenfull';

export default {
  name: 'App',
  data() {
    return {
      timer: null,
      time: 0,
      timeout: 10 * 60 * 1000, //
      isFullscreen: false,
    };
  },

  mounted() {
    if (this.needToHome()) {
      this.start();
    }
  },
  watch: {
    $route() {
      this.stop();
      if (this.needToHome()) {
        this.start();
      } else {
        this.stop();
      }
    },
  },
  destroyed() {
    clearInterval(this.timer);
  },
  methods: {
    fullscreen() {
      if (!this.isFullscreen) {
        this.isFullscreen = true;
        let docElm = document.documentElement;
        if (docElm.requestFullscreen) {
          docElm.requestFullscreen();
        } else if (docElm.msRequestFullscreen) {
          docElm = document.body; // overwrite the element (for IE)
          docElm.msRequestFullscreen();
        } else if (docElm.mozRequestFullScreen) {
          docElm.mozRequestFullScreen();
        } else if (docElm.webkitRequestFullScreen) {
          docElm.webkitRequestFullScreen();
        }
      } else {
        this.isFullscreen = false;
        if (document.exitFullscreen) {
          document.exitFullscreen();
        } else if (document.msExitFullscreen) {
          document.msExitFullscreen();
        } else if (document.mozCancelFullScreen) {
          document.mozCancelFullScreen();
        } else if (document.webkitCancelFullScreen) {
          document.webkitCancelFullScreen();
        }
      }
    },
    start() {
      this.timer = setInterval(() => {
        this.time += 1000;
        if (this.needToHome()) {
          // console.log(this.time);
          if (this.time > this.timeout) {
            // console.log(this.time);
            // console.log(this.$route.path);
            this.$router.push('home');
          }
        }
      }, 1000);
    },
    stop() {
      this.time = 0;
      clearInterval(this.timer);
    },
    touch() {
      this.time = 0;
    },
    needToHome() {
      let path = ['/home', '/login', '/register', '/store'];
      const flag = path.indexOf(this.$route.path) >= 0;
      // console.log(flag);
      return !flag;
    },
  },
};
</script>

<style lang="less" scoped></style>
